<template>
  <div class="header align-items_end justify_between">
    <div class="side t_left">11</div>
    <h3 class="m_unset">{{ region }} 结核病全流程管理系统</h3>
    <div class="side t_right">
      <a-range-picker v-model:value="dateRange" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Header',
  props: {
    region: String,
  },
  setup() {
    const dateRange = ref();
    return {
      dateRange,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.header {
  height: 60px;
  background-color: #314362;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
  padding: 4px map-get($spaces, sm);
  background: url(@/assets/header-bg.png);
  background-size: 100% 60px;
  background-blend-mode: lighten;
  .side {
    width: 20%;
  }
}
</style>
